Command Palette: Make admin bar trigger a native group element by ellatrix · Pull Request #11171 · WordPress/wordpress-develop

ellatrix · 2026-03-05T07:50:34Z

Trac: https://core.trac.wordpress.org/ticket/64672

Screen.Recording.2026-03-05.at.09.53.12.mov

Summary

Follow-up to #11108. Makes the command palette trigger a native admin bar group element instead of a regular node in root-default, as suggested in review.

Registers command-palette as its own group under root using add_group(), with the trigger node inside it — this produces a sibling <ul> to root-default and top-secondary
Converts .quicklinks to display: flex so the three groups lay out naturally: left items, centered command palette, right items
Both side groups use flex: 1 1 0; min-width: fit-content — equal space when the viewport is wide (perfect centering), but they won't shrink below their content on narrow viewports
Command palette group uses flex: 0 0 auto between them

Existing float declarations on <li> elements become harmless (floats are ignored on flex items per CSS spec).

Alternative approach

An alternative would be to bypass the node/group API entirely and render the command palette directly in WP_Admin_Bar::_render() as a standalone <button> element — a sibling to the <ul> groups inside .quicklinks. This would give full control over the markup (semantic <button> instead of <a> inside <li> inside <ul>), but requires modifying class-wp-admin-bar.php and hardcoding the element into the admin bar's render method. The group-based approach here is more straightforward since it reuses the existing API and keeps all the command palette logic in admin-bar.php.

Test plan

Load any wp-admin page: command palette button should appear centered in the admin bar
Click it: should open the command palette
Check front-end pages: button should NOT appear
Resize viewport — left group should push the command palette rightward rather than shrinking
Test RTL layout
Test mobile viewport (admin bar collapse behavior)
Test different color schemes (modern, default)

🤖 Generated with Claude Code

…bar version)

Instead of adding the command palette as a regular node in root-default, register it as its own group under root. This makes it a sibling `<ul>` to root-default and top-secondary, allowing flexbox centering on `.quicklinks` without being constrained to the `<li>` node structure. - Add `command-palette` as a group with `add_group()`, place the trigger node inside it as `command-palette-trigger` - Convert `.quicklinks` to `display: flex` for layout control - Both side groups use `flex: 1 1 0; min-width: fit-content` so they share equal space but never shrink their content - Command palette group uses `flex: 0 0 auto` to sit centered between them naturally Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

github-actions · 2026-03-05T07:50:44Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props wildworks, ellatrix, mcsf, westonruter, sabernhardt, ocean90, annezazu, 4thhubbard.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

westonruter · 2026-03-05T08:05:51Z

So the command palette is not accessible on mobile. Why shouldn't it be?

ellatrix · 2026-03-05T08:16:56Z

It's the same as #11108, I don't think I changed anything there. I guess it will have to be added explicitly to the mobile version of the admin bar

t-hamano

Thanks for the PR! When I actually saw the center-aligned search bar, I realized it was quite prominent 😅

There are two things that concern me.

With several plugins installed, the search bar may become misaligned:
When I open the editor, you may find the search bar overlapping, which can be a bit confusing:

Personally, I think going with #11160 might have the least impact. What do you think? cc @sabernhardt

ellatrix · 2026-03-05T08:22:12Z

With several plugins installed, the search bar may become misaligned:

I think that's fine, it still looks ok?

When I open the editor, you may find the search bar overlapping, which can be a bit confusing:

What o you mean here? What overlaps what?

Personally, I think going with #11160 might have the least impact. What do you think? cc @sabernhardt

Would need approval from design

ocean90 · 2026-03-05T08:29:08Z

Something that looks like an input/search field but isn't one feels wrong.

When I open the editor, you may find the search bar overlapping, which can be a bit confusing:

What o you mean here? What overlaps what?

They're not overlapping, but there are two of these bars right next to each other.

t-hamano · 2026-03-05T08:29:18Z

What overlaps what?

I was referring to these two places. There are two search bars close to each other that both trigger the command palette.

ellatrix · 2026-03-05T08:33:42Z

@t-hamano Isn't that a problem in your PR too? How has it been addressed elsewhere? Or is there a proposal to unify them.

Something that looks like an input/search field but isn't one feels wrong.

@ocean90 It's the same for the editor document bar 🙂

t-hamano · 2026-03-05T08:36:35Z

Isn't that a problem in your PR too? How has it been addressed elsewhere?

Two approaches have been proposed that do not use a search bar in the first place.

annezazu · 2026-03-05T14:48:35Z

Personally, I think going with #11160 might have the least impact. What do you think?

Chatting with @mtias about this and a more condensed command‑K control is okay for beta 3 if needed, rather than the search icon. The search icon alone is not enough.

annezazu · 2026-03-09T10:58:41Z

Let's land this ahead of the next beta so we can get more testing. Previously, the smaller command‑K control would have worked to get an initial version in to a prior beta but, at this point, it's important we stick with the design and project leadership direction.

mcsf

Nice. Let's go with this and see if it needs any polishing before 7.0.

mcsf · 2026-03-09T12:08:14Z

src/wp-includes/css/admin-bar.css

+}
+
+#wpadminbar #wp-admin-bar-command-palette-trigger .ab-icon {
+	transform: scaleX(-1);


Clever 😄

This is copied from @t-hamano's PR

westonruter

What again about the mobile viewport? Having the admin bar expose an item to access the command palette on mobile is arguably even more important since the keyboard is not normally displayed when an input isn't focused. I like the approach in @sabernhardt's PR: #11160

sabernhardt

I made #11160, hoping to avoid picking this one apart.

Something that looks like an input/search field but isn't one feels wrong.

It's the same for the editor document bar 🙂

The proposed toolbar link is not the same. The document bar element in the editor canvas does not have a search icon or empty space between the icon and the keyboard shortcut text. Anyone who sees something that looks like this should expect it to be an input field (or maybe the overlay could cover it, with similar styling, as in Slack).

sabernhardt · 2026-03-09T18:55:47Z

src/wp-includes/css/admin-bar.css

 }

+#wpadminbar .quicklinks {
+	display: flex;


Introducing flex—without wrap—in core intensifies an existing problem for sites with crowded toolbars. That can push the profile links and/or others off the screen, making it impossible to reach the Log Out link (unless you use the keyboard to navigate). Then adding an element that is 215 pixels wide would break more sites, and in a worse way.

Profile menu off-screen at 1,000 pixels wide, with a few plugins activated:

Profile menu expanded with the Enter key:

Trying something where if it doesn't fit, we fall back to normal toolbar behavior.

shrink.mov

sabernhardt · 2026-03-09T19:03:47Z

src/wp-includes/css/admin-bar.css

+
+#wpadminbar #wp-admin-bar-command-palette-trigger .ab-item {
+	width: 200px;
+	background: #757575;


#757575 does not give enough contrast behind the #f0f0f1 text in the Fresh scheme (4.05:1).

The hover and focus states typically have less contrast.

Low contrast for Modern (default) scheme on hover/focus:
3.47:1 #7b90ff against #3c434a

Very low contrast for Fresh on hover/focus:
1.96:1 #72aee6 against #757575

Yes, this needs to be changed to a variable

Actually sorry, I guess it needs an override for that color scheme

sabernhardt · 2026-03-09T19:04:50Z

src/wp-admin/css/colors/_admin.scss


 .wp-responsive-open div#wp-responsive-toggle a {
-	// ToDo: make inset border
+	// ToDo: make inset border;


Unrelated change.

I do not even find a #wp-responsive-toggle anywhere, even in code history as of r26402, so the two rulesets probably can be removed entirely (later).

I just built on top of Aki's PR, I can remove it https://github.com/WordPress/wordpress-develop/pull/11108/changes#diff-4e38d3d83e223f96e67e1cf68c5b2faa0abbd3c068a2405cf0e712dd8edcf8e9R669

4thhubbard · 2026-03-09T21:51:04Z

This looks good. Please land this so we have time to test sooner rather than later.

t-hamano and others added 3 commits March 2, 2026 19:40

Add command palette trigger button to admin bar (Left-aligned search …

9ac1e70

…bar version)

Merge branch 'trunk' into 64672-command-palette-admin-bar-searchbar

72b011e

ellatrix requested review from mcsf and t-hamano March 5, 2026 07:58

t-hamano reviewed Mar 5, 2026

View reviewed changes

mcsf approved these changes Mar 9, 2026

View reviewed changes

westonruter requested changes Mar 9, 2026

View reviewed changes

sabernhardt suggested changes Mar 9, 2026

View reviewed changes

Conversation

ellatrix commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Alternative approach

Test plan

Uh oh!

github-actions bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

westonruter commented Mar 5, 2026

Uh oh!

ellatrix commented Mar 5, 2026

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

ellatrix commented Mar 5, 2026

Uh oh!

ocean90 commented Mar 5, 2026

Uh oh!

t-hamano commented Mar 5, 2026

Uh oh!

ellatrix commented Mar 5, 2026

Uh oh!

t-hamano commented Mar 5, 2026

Uh oh!

annezazu commented Mar 5, 2026

Uh oh!

annezazu commented Mar 9, 2026

Uh oh!

mcsf left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

westonruter left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sabernhardt left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

4thhubbard commented Mar 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

ellatrix commented Mar 5, 2026 •

edited

Loading

github-actions bot commented Mar 5, 2026 •

edited

Loading

westonruter left a comment •

edited

Loading